<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0 ,minimum-scale=1.0 ,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>e币</title>
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/iconfont.css"/>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <style>
        .content{}
        .content .head{padding: 20px 0;color: #f69802;text-align: center;}
        .content .head span{font-size: 22px;}
        .content .head span i{margin-right: 5px;font-size: 30px;vertical-align: middle;}
        .content .head .number{color: #f69802;margin-top: 10px;font-size: 45px;}
        .content .title{background-color: #eeedf3;color: #666;font-size: 13px;padding: 5px 10px;}

        .list{padding: 10px;}
        .list ul{width: 100%;}
        .list li{padding: 8px 0;position: relative;}
        .list li .box{overflow: hidden;}
        .list li .left{float: left;}
        .list li .left .name{margin-bottom: 3px;}
        .list li .right{float: right}
        .list li .right p{font-size: 24px;line-height: 35px;}

        .pay-detail{position: fixed;left: 0;bottom: 0;width: 100%;z-index: 99999;padding: 10px 15px;
            background-color: #fff;box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);visibility: hidden;}
        .pay-detail .p-title{position: relative;height: 30px;line-height: 30px;}
        .pay-detail .p-title .close{position: absolute;color: #333;}
        .pay-detail .p-title p{text-align: center;font-size: 16px;color: #333;}
        .pay-input{font-size: 14px;line-height: 20px;overflow: hidden;color: #333;padding: 15px 0 8px;
            position: relative;}
        .pay-input>div{float: left;width: 33.3333%;}
        .pay-input .left{}
        .pay-input .center{text-align: center;}
        .pay-input .right{text-align: right;}
        .pay-way{}
        .pay-way .title{font-size: 12px;color: #333;margin: 20px 0 10px;}
        .pay-way ul{}
        .pay-way li{overflow: hidden;position: relative;padding: 10px 0;}
        .pay-way li label{position: absolute;left: 0;top: 0;width: 100%;height: 100%;}
        .pay-way li .left{float: left;}
        .pay-way li .left i{font-size: 35px;margin: 0;padding: 0;}
        .pay-way li .left .icon-zhifubao{color: #00b3f2;}
        .pay-way li .left .icon-weixin1{color: #43b032;}
        .pay-way li .center{float: left;margin-left: 10px;}
        .pay-way li .center p{font-size: 14px;color: #333;margin-top: 5px;}
        .pay-way li .center span{font-size: 10px;color: #666;}
        .pay-way li .right{float: right;}
        .pay-way li .right input{-webkit-appearance: none;width: 20px;height: 20px;border: 1px solid #ffc10c;
            border-radius: 50%;position: relative;margin-top: 10px;}
        .pay-way li .right input:before{content: '';width: 12px;height: 12px;border-radius: 12px;position: absolute;
            left: 3px;top: 3px;background-color: #fff;}
        .pay-way li .right input:checked:before{background-color: #ffc10c;}
        .pay-btn{margin-top: 70px;}
        .pay-btn button{font-size: 16px;display: block;width: 100%;height: 45px;-webkit-appearance: none;border: none;
            outline: none;color: #fff;background-color: #ffc10c;border-radius: 4px;}

        .footer{height: 50px;}
        .footer-fixed{position: fixed;left: 0;bottom: 0;width: 100%;height: 50px;line-height: 50px;}
        .footer-fixed a{float: left;width: 50%;color: #fff;font-size: 16px;text-align: center;}
        .footer-fixed .recharge{background-color: #ffc10c;}
        .footer-fixed .withdraw{background-color: #f69802;}

    </style>
</head>
<body>
<script src="../js/overall_mask.js"></script>
<!--遮罩-->
<div class="mask"></div>

    <header class="header header2">
        <div class="header-fixed">
            <div class="left">
                <a href="javascript:window.history.back();">
                    <i class="iconfont icon-arrowleft"></i>
                </a>
            </div>
            <div class="center">e币</div>
        </div>
    </header>
    <div class="content">
        <div class="head">
            <span><i class="iconfont icon-renminbi1"></i>e币</span>
            <p class="number">100</p>
        </div>
        <div class="title">收支明细</div>
        <div class="list">
            <ul>
                <li class="bottom-line">
                    <div class="box">
                        <div class="left">
                            <p class="name">支付宝充值</p>
                            <p class="time">2016-06-12 11:23:15</p>
                        </div>
                        <div class="right">
                            <p>+100</p>
                        </div>
                    </div>
                </li>
                <li class="bottom-line">
                    <div class="box">
                        <div class="left">
                            <p class="name">支付宝充值</p>
                            <p class="time">2016-06-12 11:23:15</p>
                        </div>
                        <div class="right">
                            <p>+100</p>
                        </div>
                    </div>
                </li>
                <li class="bottom-line">
                    <div class="box">
                        <div class="left">
                            <p class="name">支付宝充值</p>
                            <p class="time">2016-06-12 11:23:15</p>
                        </div>
                        <div class="right">
                            <p>+100</p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="pay-detail">
        <div class="p-title">
            <div class="close"><i class="iconfont icon-close"></i></div>
            <p>付款详情</p>
        </div>
        <div class="pay-input bottom-line">
            <div class="left">充值金额:</div>
            <div class="center">
                <input type="number" placeholder="请输入充值金额"/>
            </div>
            <div class="right">元</div>
        </div>
        <div class="pay-way">
            <p class="title">请选择支付方式</p>
            <ul>
                <!--<li class="top-line bottom-line">-->
                    <!--<label for="ali-pay"></label>-->
                    <!--<div class="left"><i class="iconfont icon-zhifubao"></i></div>-->
                    <!--<div class="center">-->
                        <!--<p>支付宝支付</p>-->
                        <!--<span>推荐已安装支付宝客户端的用户使用</span>-->
                    <!--</div>-->
                    <!--<div class="right">-->
                        <!--<input id="ali-pay" type="radio" name="pay"/>-->
                    <!--</div>-->
                <!--</li>-->
                <li class="top-line bottom-line">
                    <label for="weixin"></label>
                    <div class="left"><i class="iconfont icon-weixin1"></i></div>
                    <div class="center">
                        <p>微信支付</p>
                        <span>推荐已安装微信客户端的用户使用</span>
                    </div>
                    <div class="right">
                        <input id="weixin" type="checkbox" name="pay"/>
                    </div>
                </li>
            </ul>
        </div>
        <div class="pay-btn">
            <button type="button">确认支付</button>
        </div>
    </div>
    <footer class="footer">
        <div class="footer-fixed">
            <a href="javascript:void(0);" class="recharge">充值</a>
            <a href="../html/take_cash.html" class="withdraw">提现</a>
        </div>
    </footer>
</body>
<script>
    $('.recharge').click(function(){
        openModalMask();
        $('.pay-detail').removeClass('slide-down').addClass('slide-up');
    });
    $('.close').click(function(){
        closeModalMask();
        $('.pay-detail').removeClass('slide-up').addClass('slide-down');
    })
</script>
</html>